<template>
  <!-- 基础信息配置 -->
  <div class="basicInfo">
    <!-- 位置信息 -->
    <div class="info">
      <div class="nameList">
        <div class="name">位置信息</div>
        <div class="list" v-if="!disabledType">
          <el-button type="primary" round @click="submit">保存</el-button>
        </div>
      </div>
      <div class="items">
        <div class="title">位置编码</div>
        <div class="cont"><span style="margin-right:5px;">{{ siteCode }}</span></div>
      </div>
      <div class="items">
        <div class="title"><span class="mark">*</span>位置名称</div>
        <div class="cont">
          <el-input v-model="basicInfo.categoryName" maxlength="32" placeholder="请输入位置名称" clearable
            :disabled="disabledType">
          </el-input>
        </div>
      </div>
    </div>

    <!-- 链接配置 -->
    <div class="info" style="padding-bottom:10px;border-bottom: 1px dashed #cdcdcd;">
      <div class="nameList">
        <div class="name">配置链接</div>
      </div>
      <div class="items" v-for="(item, index) in hrefUrlList" :key="index">
        <div class="title" style="width:40px;">{{ item.name }}</div>
        <div class="cont" style="width: calc(100% - 50px);">
          <el-input v-model="item.url" placeholder="请输入地址" clearable :disabled="disabledType"
            @focus="focusHrefUrl(item)">
            <template slot="prepend">{{ item.pre }}</template>
          </el-input>
        </div>
      </div>
    </div>

    <!-- 影片配置 -->
    <div class="video" style="padding-bottom:20px;border-bottom: 1px dashed #cdcdcd;">
      <div class="nameList">
        <div class="name">已配置影片</div>
        <div class="list" v-if="!disabledType">
          <el-button type="text" @click="updatePosition('top')" :disabled="disabled">置顶</el-button>
          <el-button type="text" @click="updatePosition('moveUp')" :disabled="disabled">上移</el-button>
          <el-button type="text" @click="updatePosition('moveDown')" :disabled="disabled">下移</el-button>
          <el-button type="text" @click="updatePosition('bottom')" :disabled="disabled">置底</el-button>
          <el-button type="text" style="color:red;" :disabled="JSON.stringify(this.select) == '{}' ? true : false"
            @click="deleteDataVideo">删除</el-button>
          <el-button type="text" @click="addVideo">新增影片</el-button>
        </div>
      </div>
      <div class="table" v-if="tableDataV.data.length > 0">
        <!-- header -->
        <div class="colums">
          <div class="colItem" v-for="(item, idx) in tableDataV.columns" :key="'h' + idx">
            {{ item.title }}
          </div>
        </div>
        <!-- bady -->
        <div class="dataBox" :class="item.isDefault ? 'color' : ''" v-for="(item, index) in tableDataV.data"
          :key="'b' + index" @click="selectDataVideo(item)">
          <!-- 单选 -->
          <div class="selcet" :class="item.isChecked ? 'isChecked' : ''"></div>
          <div class="item">{{ index + 1 }}</div>
          <el-tooltip class="item" effect="dark" :content="item.mediaCode" placement="top">
            <div class="item">{{ item.mediaCode }}</div>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" :content="item.title" placement="top">
            <div class="item">{{ item.title }}</div>
          </el-tooltip>
        </div>
      </div>
      <div v-if="tableDataV.data.length <= 0"
        style="height:60px;display:flex;color:rgb(205, 205, 205);justify-content:center;align-items:center;">
        暂未配置影片
      </div>
    </div>

    <!-- 海报配置 -->
    <div class="poster">
      <div class="nameList">
        <div class="name">已配置海报</div>
        <div class="list" v-if="!disabledType">
          <el-button v-if="positionInfo.type != 'bannerVideo1'" type="text" @click="configData(true)"
            :disabled="isDisabled">设置显示</el-button>
          <el-button type="text" style="color:red;" :disabled="JSON.stringify(this.selectItem) == '{}' ? true : false"
            @click="deleteDataPoster">删除</el-button>
          <el-button type="text" @click="addPoster">新增海报</el-button>
        </div>
      </div>
      <!-- table -->
      <div class="table" v-if="tableDataP.data.length > 0">
        <!-- header -->
        <div class="colums">
          <div class="colItem" v-for="(item, idx) in tableDataP.columns" :key="'h' + idx">
            {{ item.title }}
          </div>
        </div>
        <!-- bady -->
        <div class="dataBox" :class="item.defaultImg ? 'color' : ''" v-for="(item, index) in tableDataP.data"
          :key="'b' + index" @click="selectDataPoster(item)">
          <!-- 单选 -->
          <div class="selcet" :class="item.isChecked ? 'isChecked' : ''"></div>
          <div class="item">{{ item.imgSequence }}</div>
          <div class="item">{{ item.imgName }}</div>
          <div class="item">{{ item.imgType | formType }}</div>
        </div>
      </div>
      <!-- 图片预览 -->
      <div class="imgData" v-if="tableDataP.data.length > 0 && preImgUrl !== ''">
        <img :src="preImgUrl" alt="">
      </div>
      <div v-if="tableDataP.data.length <= 0"
        style="height:60px;display:flex;color:rgb(205, 205, 205);justify-content:center;align-items:center;">
        暂未配置海报
      </div>
    </div>

    <!-- 新增影片弹窗 -->
    <Modal v-model="editModalVideo.show" :title="editModalVideo.title" :width="1200">
      <StaryeaLoading v-if="modalTable.loading"></StaryeaLoading>
      <div class="seachBox">
        <div class="boxFlex">
          <div class="items">
            <div class="title">影片CODE</div>
            <div class="cont">
              <el-input v-model="seachData.mediaCode" placeholder="请输入影片CODE" style="width:250px;" clearable>
              </el-input>
            </div>
          </div>
          <div class="items">
            <div class="title">影片名称</div>
            <div class="cont">
              <el-input v-model="seachData.title" placeholder="请输入影片名称" style="width:250px;" clearable>
              </el-input>
            </div>
          </div>
        </div>
        <div><Button type="primary" @click="queryVideoData(seachData)">查询</Button></div>
      </div>
      <div class="table_video">
        <!-- header -->
        <div class="colums">
          <div class="colItem" v-for="(item, idx) in modalTable.columns" :key="'h' + idx">
            {{ item.title }}
          </div>
        </div>
        <!-- bady -->
        <div class="dataBox" :class="item.isChecked ? 'color' : ''" v-for="(item, index) in modalTable.data"
          :key="'b' + index" @click="selectVideo(item)">
          <!-- 单选 -->
          <div class="selcet" :class="item.isChecked ? 'isChecked' : ''"></div>
          <div class="item">{{ item.mediaCode }}</div>
          <el-tooltip class="item" effect="dark" :content="item.title" placement="top">
            <div class="item">{{ item.title }}</div>
          </el-tooltip>
          <div class="item">{{ item.metaId | formatVideoType }}</div>
          <div class="item">{{ item.providerIds }}</div>
          <div class="item">{{ item.cpName }}</div>
          <div class="item">{{ item.createTime }}</div>
        </div>
      </div>
      <Page :total="modalTable.total" :current="modalTable.current" :page-size="modalTable.pageSize"
        @on-page-size-change="changePageSize" @on-change="changePage" show-elevator show-sizer show-total transfer
        style="text-align:right;margin-top: 20px;" />
      <div slot="footer">
        <Button @click="handleCancleVideo">取消</Button>
        <Button type="primary" @click="handleOkVideo">确定</Button>
      </div>
    </Modal>

    <!-- 新增海报弹窗 -->
    <Modal v-model="editModalPoster.show" :title="editModalPoster.title" :width="500">
      <div class="postr_info">
        <div class="items">
          <div class="title"><span class="mark">*</span>海报上传</div>
          <div class="cont">
            <el-button type="text" @click="addImage()">本地上传</el-button>
            <el-upload ref="upload" :headers="headers" :action="uploadURL" :data="{ adType: '301' }"
              style="display:none" :show-file-list="false" :before-upload="handleMaxSize" :on-success="handleSuccess">
            </el-upload>
            <el-button class="posterBtn" type="text" disabled>海报库选择</el-button>
          </div>
        </div>
        <div class="items">
          <div class="title">海报名称</div>
          <div class="cont">
            <el-input v-model="posterInfo.imgName" placeholder="请输入海报名称" disabled></el-input>
          </div>
        </div>
        <div class="items">
          <div class="title"><span class="mark">*</span>海报类型</div>
          <div class="cont">
            <el-select v-model="posterInfo.imgType" placeholder="请选择海报类型" style="width:100%" clearable>
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="items">
          <div class="title"><span class="mark">*</span>海报排序</div>
          <div class="cont">
            <el-select v-model="posterInfo.imgSequence" placeholder="请选择海报排序" style="width:100%" clearable>
              <el-option v-for="item in imgType" :key="item.value" :label="item.label" :value="item.value">
                <span style="marginRight:5px;">{{ item.value }}：</span>
                <span style="color:#8492a6;font-size:13px;">{{ item.label }}</span>
              </el-option>
            </el-select>
          </div>
        </div>
        <!-- 图片展示 -->
        <div v-if="posterInfo && posterInfo.imgUrl != ''" class="preview">
          <div class="name">图片名称：{{ posterInfo.imgName }}</div>
          <div class="img">
            <img :src="posterInfo.imgUrl">
            <i @click="deleteImg" class="el-icon-error"></i>
          </div>
        </div>
      </div>
      <div slot="footer">
        <Button @click="handleCanclePoster">取消</Button>
        <Button type="primary" @click="handleOkPoster">确定</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
export default {
  name: "basicInfo",
  props: {
    siteId: {
      tyep: String,
      required: true,
    },
    disabledType: {
      type: Boolean,
      required: true,
    },
    positionInfo: {//海报位
      type: Object,
      required: true,
      default: () => { }
    },
    floorComList: {//楼层组件列表
      type: Object,
      required: true,
      default: () => { }
    }
  },
  data() {
    return {
      // 基础信息配置
      loading: false,
      handleType: sessionStorage.getItem("handleType"),
      siteCode: '',
      basicInfo: {},
      hanldType: "",
      hrefUrlList: [],//链接配置

      // 影片配置
      disabled: false,
      tableDataV: {//table
        columns: [
          { title: '', type: 'index' },
          { title: '排序', key: 'index' },
          { title: '影片code', key: 'mediaCode' },
          { title: '影片名称', key: 'title' },
        ],
        data: [],
        loading: false,
      },
      select: {},
      editModalVideo: {//新增弹窗
        show: false,
        title: '',
      },
      seachData: {},//弹窗查询
      modalTable: {//弹窗table
        columns: [
          { type: '', type: 'index' },
          { title: '影片code', key: 'mediaCode' },
          { title: '影片名称', key: 'title' },
          { title: '影片类型', key: 'metaId' },
          { title: '提供商ID', key: 'providerIds' },
          { title: '内容提供商名称', key: 'cpName' },
          { title: '上线时间', key: 'createTime' },
        ],
        data: [],
        loading: false,
        total: 0,
        current: 1,
        pageSize: 10,
      },
      video: {},

      // 海报配置
      headers: { 'Auth-Token': getToken() },
      uploadURL: "/iptv/epg/sichuan/categoryaudit/addPictures",
      options: [// 列表数据
        { value: 0, label: '缩略图' },
        { value: 1, label: '海报' },
        { value: 2, label: '剧照' },
        { value: 3, label: '图标' },
        { value: 4, label: '标题图' },
        // {value:5, label:'广告图'},
        // {value:6, label:'草图'},
        { value: 7, label: '背景图' },
        // {value:9, label:'频道图片'},
        // {value:10, label:'频道黑白图片'},
        // {value:11, label:'频道LOGO'},
        // {value:12, label:'频道名字图片'},
        { value: 13, label: '海报角标' },
        { value: 99, label: '其他' },
      ],
      imgType: [
        { value: 240, label: '横图(中)' },
        { value: 247, label: '竖图(中)' },
        { value: 778, label: '横图(大)' },
        { value: 999, label: '竖图(大)' },
      ],
      preImgUrl: '',
      selectItem: {},//选中设置默认的海报
      isDisabled: false,//设置显示按钮
      tableDataP: {//table
        columns: [
          { title: '', type: 'index' },
          { title: '排序', key: 'imgSequence' },
          { title: '海报名称', key: 'imgName' },
          { title: '海报类型', key: 'imgType' },
        ],
        data: [],
        loading: false
      },
      editModalPoster: {// 新增弹窗
        show: false,
        title: '',
      },
      posterInfo: {},
    }
  },
  watch: {
    siteId: {
      handler() {
        this.initQueryBasic();
        this.initQueryVideo();
        this.initQueryPoster();
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    /********************* 基础信息 *********************/
    initQueryBasic() {
      let params = { floorPageId: this.positionInfo.floorId, sitePageId: this.positionInfo.siteId, };
      this.loading = true;
      requestInfoConfig(params, 'selecBasic').then(res => {
        let { result_code, result_msg, data } = res;
        console.log("位置信息：", data);
        if (result_code == 0) {
          this.loading = false;
          sessionStorage.setItem('basicInfo', JSON.stringify(data));
          if (data == 'null') {
            this.hanldType = "add";
            this.siteCode = "保存后自动生成"
            this.basicInfo = {
              floorPageId: '',
              sitePageId: '',
              categoryCode: '',
              categoryName: "",
              siteId: "",
              contentType: '1',
              description: "",
              sequence: "",
            }
            this.hrefUrlList = [
              { url: "", pre: "Z@U@", name: "中兴", sequence: 1 },
              { url: "", pre: "H@U@", name: "华为", sequence: 2 },
              { url: "", pre: "E@U@", name: "EPG3.0", sequence: 3 },
              { url: "", pre: "A@U@", name: "APK", sequence: 4 },
            ];
          } else {
            this.hanldType = "edit";
            this.siteCode = data.siteId;
            this.basicInfo = data;
            this.hrefUrlList = data.hrefInfo;
          }
        } else {
          this.$Message.error(result_msg || this.$cfg.COMMONERRORMSG);
        }
      })
    },
    // 链接地址配置
    focusHrefUrl(item) {
      this.$emit('hrefUrlModel', item, true);
    },
    // 保存：基本信息和链接地址
    submit() {
      let _this = this;
      // 更改海报标题
      this.floorComList.comList.forEach(item => {
        item.value.forEach(ele => {
          if (ele.title && (ele.siteId == this.positionInfo.siteId)) {
            ele.title = this.basicInfo.categoryName;
          }
        })
      })
      //基本信息
      let params = {
        sitePageId: this.positionInfo.siteId,
        categoryName: this.basicInfo.categoryName,
        siteId: this.siteCode,
        contentType: '1',
        description: this.basicInfo.description,
        sequence: Number(this.positionInfo.index),
        floorPageId: this.positionInfo.floorId,
        flowId: this.positionInfo.flowId,
        modularJsonStr: JSON.stringify({
          comList: this.floorComList.comList,
          modelH: this.floorComList.modelH,
          titleBar: this.floorComList.titleBar
        })
      }
      // console.log('传给后端的参数：',params);
      // console.log('传给后端的参数：',JSON.parse(params.modularJsonStr));
      //链接地址
      let position = { sitePageId: this.positionInfo.siteId, hrefInfo: JSON.stringify(this.hrefUrlList) };
      if (params.categoryName == '') {
        this.$message({ message: '您还有必填项未填，请检查！', type: 'warning' });
      } else {
        // 轮播海报时添加轮播海报的标记type=bannerBar
        if (this.positionInfo.type == 'bannerBar') { params.type = this.positionInfo.type };
        console.log('保存位置信息：', params);
        if (this.hanldType == 'add') {
          requestInfoConfig(params, 'insertBasic').then(res => {//基本信息
            let { result_code, result_msg } = res;
            if (result_code == 0) {
              requestInfoConfig(position, 'savePositionLink').then(res => {//链接地址
                let { result_code, result_msg } = res;
                if (result_code == 0) {
                  this.$message({ message: '保存成功', type: 'success' });
                  _this.initQueryBasic();
                } else {
                  this.$Message.error(result_msg || this.$cfg.COMMONERRORMSG);
                }
              })
            } else {
              this.$Message.error(result_msg || this.$cfg.COMMONERRORMSG);
            }
          })
        } else if (this.hanldType == 'edit') {
          params.id = this.basicInfo.id;
          requestInfoConfig(params, 'updateBasic').then(res => {//基本信息
            let { result_code, result_msg } = res;
            if (result_code == 0) {
              requestInfoConfig(position, 'savePositionLink').then(res => {//链接地址
                let { result_code, result_msg } = res;
                if (result_code == 0) {
                  this.$message({ message: '保存成功', type: 'success' });
                  _this.initQueryBasic();
                } else {
                  this.$Message.error(result_msg || this.$cfg.COMMONERRORMSG);
                }
              })
            } else {
              this.$Message.error(result_msg || this.$cfg.COMMONERRORMSG);
            }
          })
        }
      }
    },

    /********************* 影片配置 *********************/
    // 初始化查询配置项
    initQueryVideo() {
      let params = { floorPageId: this.positionInfo.floorId, sitePageId: this.positionInfo.siteId };
      this.tableDataV.loading = true;
      requestInfoConfig(params, 'selectPositionVod').then(res => {
        let { result_code, result_msg, data } = res;
        console.log("影片信息：", data);
        if (result_code == 0) {
          this.tableDataV.loading = false;
          if (data != 'null' && data.length > 0) {
            data.forEach(item => {
              item.isChecked = false;
              this.select = {};
            });
            // 移动按钮控制
            if (data.length == 1) {
              this.disabled = true;
            } else {
              this.disabled = false;
            }
            this.tableDataV.data = data;
            this.tableDataV.data[0].isDefault = true;
          } else {
            this.disabled = true;
            this.tableDataV.data = [];
          }
        } else {
          this.$Message.error(result_msg || this.$cfg.COMMONERRORMSG);
        }
      })
    },
    // 选择已配置影片
    selectDataVideo(data) {
      if (this.disabledType == true) return;
      this.select = data;
      this.tableDataV.data.forEach(item => {
        if (data.id == item.id) {
          item.isChecked = true;
        } else {
          item.isChecked = false;
        }
      })
    },
    // 置顶:top,置底:bottom,上移:moveUp,下移:moveDown
    updatePosition(type) {
      if (JSON.stringify(this.select) == '{}') {
        this.$message({ message: '请选择要移动的影片', type: 'warning' });
      } else {
        let params = {
          mediaCode: this.select.mediaCode,
          sitePageId: this.positionInfo.siteId,
          floorPageId: this.positionInfo.floorId,
          type: type,
        }
        this.loading = true;
        requestInfoConfig(params, 'updatePositionVod').then(res => {
          let { result_code, result_msg } = res;
          if (result_code == 0) {
            this.loading = false;
            this.initQueryVideo(this.positionInfo.siteId);
            this.$message({ message: '移动成功', type: 'success' });
          } else {
            this.$Message.error(result_msg || this.$cfg.COMMONERRORMSG);
          }
        })
      }
    },
    // 删除
    deleteDataVideo() {
      let _this = this;
      if (JSON.stringify(this.select) == '{}') {
        this.$message({ message: '请选择要删除的影片', type: 'warning' });
      } else {
        this.$Modal.confirm({
          title: '删除提醒',
          content: '确定删除该条内容？',
          loading: true,
          onOk: function () {
            let params = {
              mediaCode: _this.select.mediaCode,
              sitePageId: _this.positionInfo.siteId,
              floorPageId: _this.positionInfo.floorId,
            }
            requestInfoConfig(params, "deletePositionVod").then(res => {
              let { result_code, result_msg } = res;
              if (result_code == 0) {
                this.$message({ message: '删除成功', type: 'success' });
                this.$Modal.remove();
                _this.select = {};
                _this.initQueryVideo(_this.positionInfo.siteId);
              } else {
                this.$Message.error(result_msg || this.$cfg.COMMONERRORMSG);
              }
            })
          }
        })
      }
    },
    // 新增影片
    addVideo() {
      if (this.siteCode == '' || this.siteCode == '保存后自动生成') {
        this.$message({ message: '请先填写位置信息并保存', type: 'warning' });
      }
      else if (this.tableDataV.data.length == 5) {
        this.$message({ message: '影片最多配置5个，若要新增请先删除', type: 'warning' });
      } else {
        this.editModalVideo.show = true;
        this.editModalVideo.title = '选择影片';
        this.modalTable.data = []
        this.seachData = {
          mediaCode: '',
          title: '',
          sitePageId: this.positionInfo.siteId,
          floorPageId: this.positionInfo.floorId,
          start: 0,
          length: 10,
        };
        // this.queryVideoData();
      }
    },
    // 查询影片库
    queryVideoData(param) {
      let _this = this;
      if (typeof param === 'object') { Object.assign(this.modalTable, param) };
      _this.seachData.start = (_this.modalTable.current - 1) * _this.modalTable.pageSize;
      _this.seachData.length = _this.modalTable.pageSize;
      _this.modalTable.loading = true;//加载状态
      requestInfoConfig(_this.seachData, 'selectVodByPage').then(res => {
        let { result_code, result_msg, data, recordsTotal } = res;
        if (result_code == 0) {
          data.forEach(item => { item.isChecked = false; })
          _this.modalTable.loading = false;
          _this.modalTable.data = data;
          _this.modalTable.total = recordsTotal;
        } else {
          this.$Message.error(result_msg || this.$cfg.COMMONERRORMSG);
        }
      })
    },
    // 分页
    changePageSize(value) {
      // console.log("changePageSize",value);
      this.queryVideoData({
        pageSize: value,
        current: 1
      });
    },
    changePage(value) {
      // console.log("changePage",value);
      this.queryVideoData({
        current: value
      });
    },
    // 选择影片
    selectVideo(data) {
      this.video = data;
      this.modalTable.data.forEach(item => {
        if (data.id == item.id) {
          item.isChecked = true;
        } else {
          item.isChecked = false;
        }
      })
    },
    // 保存新增
    handleOkVideo() {
      if (JSON.stringify(this.video) == "{}") {
        this.$message({ message: '请选择要添加的影片', type: 'warning' });
      } else {
        let params = {
          mediaCode: this.video.mediaCode,
          sitePageId: this.positionInfo.siteId,
          floorPageId: this.positionInfo.floorId,
          description: "",
        }
        requestInfoConfig(params, 'savePositionVod').then(res => {
          let { result_code, result_msg } = res;
          if (result_code == 0) {
            this.$message({ message: '保存成功', type: 'success' });
            this.initQueryVideo(this.positionInfo.siteId);
            this.editModalVideo.show = false;
          } else {
            this.$Message.error(result_msg || this.$cfg.COMMONERRORMSG);
          }
        })
      }
    },
    // 关闭弹窗
    handleCancleVideo() {
      this.editModalVideo.show = false;
      this.video = {};
    },

    /********************* 海报配置 *********************/
    // 查询可配置的海报列表
    initQueryPoster() {
      let _this = this;
      let params = { floorPageId: this.positionInfo.floorId, sitePageId: this.positionInfo.siteId };
      this.tableDataP.loading = true;
      requestInfoConfig(params, 'selectImg').then(res => {
        let { result_code, result_msg, data } = res;
        console.log("海报信息：", data);
        if (result_code == 0) {
          this.tableDataP.loading = false;
          if (data != 'null' && data.length > 0) {
            _this.isDisabled = false;
            _this.preImgUrl = "";
            // 设置第一条为默认海报
            if (data.length == 1 && data[0].defaultImg == false) {
              _this.selectItem = data[0];
              _this.configData(false);
            } else {
              // 默认设置按钮及显示海报
              data.forEach(item => {
                item.isChecked = false;
                _this.selectItem = {};
                if (item.defaultImg == true) {
                  _this.preImgUrl = item.imgUrl;
                }
              })
              _this.tableDataP.data = data;
            }
          } else {
            _this.tableDataP.data = [];
            _this.isDisabled = true;
          }
        } else {
          this.$Message.error(result_msg || this.$cfg.COMMONERRORMSG);
        }
      })
    },
    // 选择海报
    selectDataPoster(data) {
      if (this.disabledType == true) return;
      this.isDisabled = data.defaultImg;
      this.preImgUrl = data.imgUrl;
      this.selectItem = data;
      this.tableDataP.data.forEach(item => {
        if (data.id == item.id) {
          item.isChecked = true;
        } else {
          item.isChecked = false;
        }
      })
    },
    // 设置海报
    configData(isDefaultImg) {
      let _this = this;
      if (JSON.stringify(this.selectItem) == '{}') {
        this.$message({ message: '请选择要设置的海报', type: 'warning' });
      } else {
        this.floorComList.comList.forEach(item => {
          item.value.forEach(ele => {
            if (ele.siteId == this.positionInfo.siteId) {
              ele.name = this.selectItem.imgName;
              ele.url = this.selectItem.imgUrl;
            }
          })
        })
        let params = {
          floorPageId: this.positionInfo.floorId,
          sitePageId: this.positionInfo.siteId,
          imgSequence: this.selectItem.imgSequence,
          imgType: this.selectItem.imgType,
          modularJsonStr: JSON.stringify({
            comList: this.floorComList.comList,
            modelH: this.floorComList.modelH,
            titleBar: this.floorComList.titleBar
          })
        }
        requestInfoConfig(params, 'setDefaultImg').then(res => {
          let { result_code, result_msg } = res;
          if (result_code == 0) {
            if (isDefaultImg == true) {
              this.$message({ message: '设置成功', type: 'success' });
            }
            _this.preImgUrl = "";
            _this.selectItem = {};
            _this.initQueryPoster();
          } else {
            this.$Message.error(result_msg || this.$cfg.COMMONERRORMSG);
          }
        })
      }
    },
    // 删除
    deleteDataPoster() {
      let _this = this;
      let modularJsonStr = "";
      if (JSON.stringify(this.selectItem) == '{}') {
        this.$message({ message: '请选择要删除的海报', type: 'warning' });
      } else {
        this.$Modal.confirm({
          title: '删除提醒',
          content: '确定删除该条内容？',
          loading: true,
          onOk: function () {
            if (_this.selectItem.defaultImg == true) {
              _this.floorComList.comList.forEach(item => {
                item.value.forEach(ele => {
                  if (ele.siteId == _this.positionInfo.siteId) {
                    ele.name = "";
                    ele.url = "";
                  }
                })
              })
              modularJsonStr = JSON.stringify({
                comList: _this.floorComList.comList,
                modelH: _this.floorComList.modelH,
                titleBar: _this.floorComList.titleBar
              })
            } else {
              modularJsonStr = "";
            }
            let params = {
              id: _this.selectItem.id,
              floorPageId: _this.positionInfo.floorId,
              sitePageId: _this.positionInfo.siteId,
              imgId: _this.selectItem.imgId,
              defaultImg: _this.selectItem.defaultImg,
              modularJsonStr: modularJsonStr
            }
            requestInfoConfig(params, "deleteImg").then(res => {
              let { result_code, result_msg } = res;
              if (result_code == 0) {
                this.$message({ message: '删除成功', type: 'success' });
                this.$Modal.remove();
                _this.preImgUrl = "";
                _this.selectItem = {};
                _this.initQueryPoster();
              } else {
                this.$Message.error(result_msg || this.$cfg.COMMONERRORMSG);
              }
            })
          }
        })
      }
    },
    // 新增海报
    addPoster() {
      if (this.siteCode == '' || this.siteCode == '保存后自动生成') {
        this.$message({ message: '请先填写位置信息并保存', type: 'warning' });
      } else if (this.positionInfo.type == 'videoBar') {
        this.$Modal.warning({ title: '提示', content: '视频框不支持配置海报' });
      } else if (this.positionInfo.type == 'bannerVideo1') {
        this.$Modal.warning({ title: '提示', content: '轮播影片不支持配置海报' });
      } else {
        this.editModalPoster.show = true;
        this.editModalPoster.title = '新增海报';
        this.posterInfo = {
          imgName: '',
          imgUrl: '',
          imgType: null,
          imgSequence: null,
          sequence: '',
          detail: '',
          imgSource: 1,
          linkType: 3,
          version: 1,
          sitePageId: this.positionInfo.siteId,
          floorPageId: this.positionInfo.floorId,
        }
      }
    },
    // 上传图片
    addImage() {
      this.$refs['upload'].$children[0].$refs.input.click();
    },
    // 大小格式校验
    handleMaxSize(file) {
      let typeParams = ['jpg', 'jpeg', 'png'];
      if (typeParams.indexOf(file.type.split('/')[1]) == -1) {
        this.$Message.error("请上传图片格式jpg,jpeg,png")
      } else if ((file.size / (1024 * 1024)) >= 1) {
        this.$Message.error("请上传小于1M的图片")
      }
    },
    // 上传成功
    handleSuccess(res, file) {
      let imgUrl = res.data.fileByteUrl;
      this.posterInfo.imgName = file.name;
      this.posterInfo.imgUrl = imgUrl;
    },
    // 删除图片
    deleteImg() {
      this.posterInfo.imgName = "";
      this.posterInfo.imgUrl = "";
    },
    // 保存新增
    handleOkPoster() {
      this.posterInfo.sequence = this.posterInfo.imgSequence;
      if (this.posterInfo.imgType == null || this.posterInfo.imgSequence == null ||
        this.posterInfo.imgUrl == '') {
        this.$message({ message: '您还有必填项未填，请检查！', type: 'warning' });
      } else {
        requestInfoConfig(this.posterInfo, 'insertImg').then(res => {
          let { result_code, result_msg } = res;
          if (result_code == 0) {
            this.$message({ message: '保存成功', type: 'success' });
            this.initQueryPoster();
            this.editModalPoster.show = false;
            this.posterInfo = {};
          } else {
            this.$Message.error(result_msg || this.$cfg.COMMONERRORMSG);
          }
        })
      }
    },
    // 关闭弹窗
    handleCanclePoster() {
      this.editModalPoster.show = false;
      this.posterInfo = {};
    },
  },
  filters: {
    // 海报类型翻译
    formType(val) {
      if (val == 0) {
        return '缩略图'
      } else if (val == 1) {
        return '海报'
      } else if (val == 2) {
        return '剧照'
      } else if (val == 3) {
        return '图标'
      } else if (val == 4) {
        return '标题图'
      } else if (val == 7) {
        return '背景图'
      } else if (val == 13) {
        return '海报角标'
      } else if (val == 99) {
        return '其他'
      }
    },
    // 影片类型
    formatVideoType(val) {
      if (val == 0) {
        return '电影'
      } else if (val == 1) {
        return '电视剧'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.basicInfo {
  margin: 15px 20px;

  .nameList {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 15px 0px;

    .name {
      font-weight: bold;
    }
  }

  .info {
    .items {
      width: 100%;
      margin: 8px 0px;
      display: flex;
      align-items: center;

      .title {
        position: relative;
        width: 60px;
        margin-right: 10px;
        text-align: right;
        color: #CFCFD2;

        .mark {
          font-family: SimSun;
          font-size: 14px;
          color: #ed4014;
          position: absolute;
          left: -8px;
        }
      }

      .cont {
        width: calc(100% - 70px);
        display: flex;
        align-items: center;
      }
    }
  }

  .table {
    .colums {
      background-color: #F0F2F5;
      padding: 0px !important;

      .colItem {
        margin: 8px 0;
        width: 60%;
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;

        &:nth-child(1) {
          margin: 8px 10px;
          width: 15px;
          height: 15px;
        }

        &:nth-child(2) {
          width: 35px;
        }

        &:nth-child(4) {
          width: 125px;
        }
      }
    }

    .colums,
    .dataBox {
      display: flex;
      align-items: center;
      justify-content: space-around;
      border: 1px solid #e8eaec;
      border-bottom: none;
    }

    .dataBox {
      &:nth-last-child(1) {
        border: 1px solid #e8eaec;
      }

      .item {
        margin: 13px 0;
        width: 60%;
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;

        &:nth-child(2) {
          width: 35px;
        }

        &:nth-child(4) {
          width: 125px;
        }
      }

      .selcet {
        display: inline-block;
        position: relative;
        border: 1px solid #dcdfe6;
        border-radius: 2px;
        box-sizing: border-box;
        margin: 10px;
        width: 15px;
        height: 15px;
        background-color: #fff;
        z-index: 1;
        transition: border-color .25s cubic-bezier(.71, -.46, .29, 1.46), background-color .25s cubic-bezier(.71, -.46, .29, 1.46);

        &::after {
          box-sizing: content-box;
          content: "";
          border: 1px solid #fff;
          border-left: 0;
          border-top: 0;
          height: 7px;
          left: 4px;
          position: absolute;
          top: 1px;
          transform: rotate(45deg) scaleY(0);
          width: 3px;
          transition: transform .15s ease-in .05s;
          transform-origin: center;
        }

      }

      .isChecked {
        background-color: #409eff;
        border-color: #409eff;

        &::after {
          transform: rotate(45deg) scaleY(1);
        }
      }
    }

    .color {
      color: #409eff;
    }
  }

  .imgData {
    margin: 20px 15px;
    border: 2px dashed #8DBEFE;
    height: 255px;

    img {
      padding: 10px 40px;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>

<style lang="scss" scoped>
// input
::v-deep .el-input__inner {
  padding: 0px 10px;
  height: 35px;
  line-height: 35px;
}

// 前缀 input
::v-deep .el-input-group__prepend {
  padding: 0 4px !important;
}

// textarea
::v-deep .el-textarea__inner {
  resize: none;
  padding: 5px 10px;
}

// 按钮
::v-deep .el-button.is-round {
  padding: 8px 12px;
  border-radius: 4px;
}

::v-deep .el-button.is-disabled,
.el-button.is-disabled:focus,
.el-button.is-disabled:hover {
  color: #C0C4CC !important;
  cursor: not-allowed;
}

::v-deep .el-button--primary {
  background-color: #3089fd;
  border-color: #3089fd;
}

::v-deep .el-button--primary:focus,
.el-button--primary:hover {
  background: #66b1ff;
  border-color: #66b1ff;
  color: #FFF;
}

::v-deep .el-button--primary.is-plain {
  color: #409EFF;
  background: #ecf5ff;
  border-color: #b3d8ff;
}

::v-deep .el-button--primary.is-plain:focus,
.el-button--primary.is-plain:hover {
  background: #409EFF;
  border-color: #409EFF;
  color: #FFF;
}



/*** 海报配置 ***/
// table
::v-deep .ivu-table-cell {
  padding: 0;
}

::v-deep .ivu-table th {
  background-color: #F0F2F5 !important;
  font-weight: normal;
}

// 新增弹窗
::v-deep .ivu-modal-body .postr_info {
  margin: 15px 20px;

  .items {
    width: 100%;
    margin: 8px 0px;
    display: flex;
    align-items: center;

    .title {
      position: relative;
      width: 60px;
      margin-right: 20px;
      text-align: right;
      color: #CFCFD2;

      .mark {
        font-family: SimSun;
        font-size: 14px;
        color: #ed4014;
        position: absolute;
        left: -8px;
      }
    }

    .cont {
      width: calc(100% - 70px);
      display: flex;
      align-items: center;

      .posterBtn {
        margin-left: 30px;
      }
    }
  }

  .preview {
    margin-left: 80px;
    margin-bottom: 10px;

    .name {
      margin-bottom: 5px;
    }

    .img {
      position: relative;
      width: 200px;
      height: 120px;

      img {
        width: 100%;
        height: 100%;
      }

      &:hover {
        cursor: pointer;

        .el-icon-error {
          display: block;
        }
      }
    }

    .el-icon-error {
      position: absolute;
      right: 0;
      top: 0;
      display: none;
      color: red;
      font-size: 25px;
      cursor: pointer;
      z-index: 9999;
    }
  }
}


/*** 影片配置 ***/
// 搜索
::v-deep .ivu-modal-body .seachBox {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  margin-bottom: 40px;

  .boxFlex {
    display: flex;
    align-items: center;

    .items {
      display: flex;
      align-items: center;

      &:nth-child(2) {
        margin: 0 15px;
      }

      .title {
        width: 70px;
        text-align: right;
        margin-right: 10px;
      }
    }
  }
}

// 表格
::v-deep .ivu-modal-body .table_video {
  .colums {
    background-color: #F0F2F5;
    padding: 0px !important;

    .colItem {
      padding: 8px 0;
      width: 200px;
      text-align: center;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      border-right: 1px dashed #cdcdcd;

      &:nth-child(1) {
        border-right: none;
        margin-right: 0;
        margin: 8px 10px;
        width: 15px;
        height: 15px;
      }

      &:nth-child(2) {
        width: 300px;
      }

      &:nth-child(4) {
        width: 120px;
      }

      &:nth-child(5) {
        width: 140px;
      }

      &:nth-last-child(1) {
        border-right: none;
        margin-right: 0;
      }
    }
  }

  .colums,
  .dataBox {
    display: flex;
    align-items: center;
    justify-content: space-around;
    border: 1px solid #e8eaec;
    border-bottom: none;
  }

  .dataBox {
    &:nth-last-child(1) {
      border: 1px solid #e8eaec;
    }

    .item {
      margin: 13px 0;
      width: 200px;
      text-align: center;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;

      &:nth-child(2) {
        width: 300px;
      }

      &:nth-child(4) {
        width: 120px;
      }

      &:nth-child(5) {
        width: 140px;
      }
    }

    .selcet {
      display: inline-block;
      position: relative;
      border: 1px solid #dcdfe6;
      border-radius: 2px;
      box-sizing: border-box;
      margin: 10px;
      width: 15px;
      height: 15px;
      background-color: #fff;
      z-index: 1;
      transition: border-color .25s cubic-bezier(.71, -.46, .29, 1.46), background-color .25s cubic-bezier(.71, -.46, .29, 1.46);

      &::after {
        box-sizing: content-box;
        content: "";
        border: 1px solid #fff;
        border-left: 0;
        border-top: 0;
        height: 7px;
        left: 4px;
        position: absolute;
        top: 1px;
        transform: rotate(45deg) scaleY(0);
        width: 3px;
        transition: transform .15s ease-in .05s;
        transform-origin: center;
      }
    }

    .isChecked {
      background-color: #409eff;
      border-color: #409eff;

      &::after {
        transform: rotate(45deg) scaleY(1);
      }
    }
  }

  .color {
    color: #409eff;
  }
}
</style>
